<template>
  <div class="index_root">
    <div>
      <form>
        <div>
          <span>主题</span>
          <el-select v-model="subject" 
          filterable 
          clearable
          filter-by-label
          placeholder="请选择"
          @blur="subjectBlur($event)"
          @focus="subjectBlur($event)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <span>标题</span>
          <input type="text" name="title" v-model="title"/>
        </div>
        <div>
          <span style="float: left">标签</span>
          <div v-if="isLabelShow" class="inputLabel">
            <input
              type="text"
              name="label"
              v-model="label"
              autocomplete="off"
              @keyup.enter="addLabel($event)"
              ref="nihao"
            />
          </div>
          <ul class="labelList" v-if="!isLabelShow">
            <li
              v-for="(item, index) in labelList"
              :key="index"
              @contextmenu.prevent.stop="showMenu($event, index, item)"
            >
              {{ item.name }}
            </li>
            <li @click="inputLabel">+</li>
          </ul>
          <div
            v-if="labelMenuState"
            class="labelMenu"
            :style="{ left: x, top: y }"
          >
            <p @click="editLabel">编辑</p>
            <p @click="deleteLabel">删除</p>
          </div>
        </div>
        <div>
          <span style="vertical-align: top;">内容</span>
          <ul class="contentUl">
            <li v-for="(item,index) in contentList" :key="index">
              <span>{{index+1}}</span>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-focus = "item.state"
                @keydown.enter.prevent.native="enterTextarea(item,index)"
                v-model="item.name">
              </el-input>
            </li>
          </ul>
        </div>
        <div class="formButton">
          <p @click="submitForm">提交</p>
          <p @click="cancelForm">取消</p>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
@import '@/assets/static/css/RecordInfo.css';
.index_root .el-input__icon {
    line-height: 24px;
}
.index_root .el-textarea {
    width: 280px;
}
.index_root textarea{
    text-indent: 1em;
}
.index_root .el-textarea__inner{
  resize: none;
}
.index_root  ul {
  list-style: none;
}
</style>
<script>
import $ from "jquery"
export default {
  data() {
    return {
      labelList: [],
      isLabelShow: false,
      label: "",
      isEditeLabel: false,
      tempLabel: "",
      tempIndex: "",
      labelMenuState: false,
      x: 0,
      y: 0,
      options: [{
          value: '选项1',
          label: '黄金糕'
        }],
      subject: '',
      title: '',
      contentList:[{
        name: "",
        state: true,
      }]
    };
  },
	directives: {
		focus:{
      inserted:function(el,{value}){
          if(value){ // if(true)就聚焦
           $($(el).children()[0]).focus()
          } 
      }
    }
	},
  methods: {
    subjectBlur(e){
      console.log("e.target.value:",e)
      if(e.target.value != null && e.target.value != ""){
        this.subject = e.target.value;
      }
    },
    inputLabel() {
      this.isLabelShow = true;
      this.label = "";
      this.$nextTick(() => {
        this.$refs.nihao.focus();
      });
    },
    addLabel(e) {
      var self = this;
      if (self.isEditeLabel) {
        self.isEditeLabel = false;
        self.$nextTick(() => {
          self.$set(self.labelList[self.tempIndex], "name", self.label);
        });
      } else {
        self.isLabelShow = false;
        self.$nextTick(() => {
          self.labelList.push({
            name: self.label,
          });
          self.label = "";
        });
      }
      self.$nextTick(() => {
        self.isLabelShow = false;
      });
    },
    showMenu(e, index, item) {
      this.labelMenuState = true;
      this.tempLabel = item.name;
      this.tempIndex = index;
      this.$nextTick(() => {
        this.x = e.clientX + 24 + "px";
        this.y = e.clientY + 10 + "px";
      });
    },
    editLabel() {
      this.label = this.tempLabel;
      this.isEditeLabel = true;
      this.labelMenuState = !this.labelMenuState;
      this.isLabelShow = !this.isLabelShow;
    },
    deleteLabel() {
      if (this.tempIndex !== "") {
        this.labelList.splice(this.tempIndex, 1);
        this.tempIndex = "";
      }
      this.labelMenuState = false;
    },
    enterTextarea (item,index) {
      if(item.state){
        this.contentList.push({
          name: "",
          state: true
        })
        this.$set(this.contentList[index],"state",false)
      }
    },
    submitForm () {
      console.log("主题：",this.subject)
      console.log("标题：",this.title)
      let list = [];
      if(this.labelList != "undefind" && this.labelList != null && this.labelList.length > 0){
        $.each(this.labelList,function(index,item){
          list.push(item.name)
        })
      }
      console.log("标签：",list)
      let conList = [];
      if(this.contentList != "undefind" && this.contentList != null && this.contentList.length > 0){
        $.each(this.contentList,function(index,item){
          conList.push(item.name)
        })
      }
      console.log("内容：",conList)
    },
    cancelForm () {
      this.title = ""
      this.labelList = []
      this.contentList = [{
        name: "",
        state: true
      }]
    }
  },
  mounted() {
    $("h1").css("color", "red");
  },
};
</script>
